<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui">


    <div class="panelTitulo">
        REFERENCIAS PERSONALES 
    </div> 

    <p:panel header="Referencia Personal" 
             style="border: none; width: 75%; margin: auto;">
        <h:form id="ReferenciaPersonalCreateForm">
            <p:growl id="mensajeReferenciaPersonal" showDetail="true" life="3000"/>
            #{referenciaPersonalController.iniciaSelected()}
            <h:panelGroup id="display" rendered="#{referenciaPersonalController.selected!=null}">

                <h:panelGrid 
                    columns="4" 
                    border="0"

                    columnClasses="column1Class, column2Class,column3Class,column4Class" 
                    >

                    <p:outputLabel value="#{bundle.CreateReferenciaPersonalLabel_nombres}" 
                                   for="nombres" />
                    <p:inputText id="nombres" 
                                 value="#{referenciaPersonalController.selected.nombres}" 
                                 title="#{bundle.CreateReferenciaPersonalTitle_nombres}"
                                 styleClass="inputText"
                                 required="true" 
                                 requiredMessage="#{bundle.CreateReferenciaPersonalRequiredMessage_nombres}"/>
                    <p:outputLabel value="#{bundle.CreateReferenciaPersonalLabel_apellidos}" 
                                   for="apellidos" />
                    <p:inputText id="apellidos" 
                                 value="#{referenciaPersonalController.selected.apellidos}" 
                                 title="#{bundle.CreateReferenciaPersonalTitle_apellidos}" 
                                 required="true"
                                 styleClass="inputText"
                                 requiredMessage="#{bundle.CreateReferenciaPersonalRequiredMessage_apellidos}"/>
                    <p:outputLabel value="#{bundle.CreateReferenciaPersonalLabel_telefono}" 
                                   for="telefono" />
                    <p:inputText id="telefono" 
                                 value="#{ referenciaPersonalController.selected.telefono}" 
                                 title="#{bundle.CreateReferenciaPersonalTitle_telefono}" 
                                 required="true"
                                 styleClass="inputText"
                                 requiredMessage="#{bundle.CreateReferenciaPersonalRequiredMessage_telefono}"/>
                    <p:outputLabel value="#{bundle.CreateReferenciaPersonalLabel_correo}" 
                                   for="correo" />
                    <p:inputText id="correo" 
                                 value="#{referenciaPersonalController.selected.correo}" 
                                 styleClass="inputText"
                                 title="#{bundle.CreateReferenciaPersonalTitle_correo}" />

                    <p:commandButton id="botonSubir" value="Subir Documento" onclick="dialogSubida.show();
                            return false;"/>
                    <p:inputText id="url" 
                                 disabled="true"
                                 styleClass="inputText"
                                 value="#{referenciaPersonalController.selected.url}" 
                                 title="#{bundle.CreateReferenciaPersonalTitle_url}" />

                </h:panelGrid>
                <div  style="margin-left: 40%; margin-bottom: 20px; margin-top: 10px;">
                    <p:commandButton actionListener="#{referenciaPersonalController.guardaNuevo(event)}" 
                                     value="AGREGAR/MODIFICAR" icon="ui-icon-disk"
                                     update="display,:ReferenciaPersonalListForm:datalist,
                                     mensajeReferenciaPersonal,
                                     :ReferenciaPersonalCreateForm:nombres,
                                     :ReferenciaPersonalCreateForm:apellidos,
                                     :ReferenciaPersonalCreateForm:telefono,
                                     :ReferenciaPersonalCreateForm:correo"
                                     />

                    <p:commandButton value="NUEVA REFERENCIA" 
                                     icon="ui-icon-document"
                                     ajax="false"
                                     />
                </div>
            </h:panelGroup>
        </h:form>
        <f:facet name="footer">
            <p:outputLabel value="Importante: " style="color:red; "/>
            <p:outputLabel value="Solo Padra Ingresar 3 Referencias Personales" style="color:#0000cc; "/>
        </f:facet>
    </p:panel>
    <p:separator style="border-style: dotted; width: 75%; margin-bottom: 10px;"/>
    <ui:include src="lista.xhtml"/>

    <p:dialog widgetVar="dialogSubida" width="600" height="200" modal="true">
        <h:form id="SubirArchivoReferenciaPersonal" enctype="multipart/form-data">
            <p:fileUpload fileUploadListener="#{referenciaPersonalController.subirArchivos}" 
                          mode="advanced" 
                          dragDropSupport="false"
                          label="Buscar Archivo"
                          update="messages,SubirArchivoReferenciaPersonal :ReferenciaPersonalCreateForm:url" 
                          sizeLimit="900000" 
                          cancelLabel="Cancelar"
                          uploadLabel="Subir"
                          fileLimit="1" 
                          allowTypes="/(\.|\/)(pdf|doc|docx)$/" 
                          oncomplete="PF('dialogSubida').hide();"/>
            <p:growl id="messages" showDetail="true" />
        </h:form>
    </p:dialog>
</ui:composition>

